<template>
  <div>
    <van-nav-bar left-arrow style="background: blue">
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <span style="color: #fff">新增拜访信息</span>
      </template>
      <template #right>
        <van-icon name="wap-home-o" color="#fff" size="25" />
      </template>
    </van-nav-bar>

    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="客户名称"
      required
      error
      @click="showPicker = $route.query.isGuesnt == undefined"
    />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        disabled
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-cell-group>
      <van-field v-model="title" error required label="拜访标题" />
      <van-field v-model="yuanyin" error required label="拜访原因" />
      <!-- <van-field
        v-model="time"
        name="datetime-picker"
        error
        required
        label="拜访时间"
      /> -->
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value1"
        label="拜访时间"
        @click="showPickers = true"
      />
      <van-popup v-model="showPickers" position="bottom">
        <van-datetime-picker
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          v-model="currentDate"
          @confirm="onConfirms"
          @cancel="showPickers = false"
        />
      </van-popup>
    </van-cell-group>

    <van-field
      v-model="site"
      rows="3"
      autosize
      label="拜访地址"
      type="textarea"
      placeholder="请输入"
      show-word-limit
      class="field"
    />

    <van-field
      v-model="state"
      rows="3"
      autosize
      label="拜访情况"
      type="textarea"
      placeholder="请输入"
      show-word-limit
      class="field"
    />

    <van-field
      v-model="message"
      rows="3"
      autosize
      label="竞争信息收集情况"
      type="textarea"
      placeholder="请输入"
      show-word-limit
      class="field"
    />

    <div class="foot">
      <van-button
        type="primary"
        size="large"
        class="btn"
        round
        @click="handleSave"
        >保存</van-button
      >
    </div>
  </div>
</template>

<script>
import { getNewVisit, getCust } from "@/request/api";
export default {
  // name: '',
  data() {
    return {
      value1: "",
      value: "",
      columns: [],
      showPicker: false,
      showPickers: false,
      // 拜访标题
      title: "",
      // 拜访原因
      yuanyin: "",
      // 拜访时间
      time: "",
      // 拜访地址
      site: "",
      // 拜访情况
      state: "",
      // 竞争信息收集
      message: "",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      console.log(this.value);
      this.showPicker = false;
    },
    onConfirms(value) {
      // this.value1 = value;
      var date = new Date(value + 8 * 3600 * 1000); // 增加8小时
      this.value1 = date
        .toJSON()
        .substr(0, 19)
        .replace("T", " ");
      console.log(this.value1);
      this.showPickers = false;
    },
    handleSave() {
      getNewVisit({
        // 客户id,搜索客户列表,拿客户id
        custId: "",
        // 客户名称
        custName: this.value,
        // 拜访标题
        visitTitle: this.title,
        // 拜访原因
        visitReason: this.yuanyin,
        // 拜访时间
        visitTime: this.time,
        // 拜访地址
        visitAddress: this.site,
        // 拜访情况
        visitSituation: this.state,
        // 竞争信息收集
        collectSituation: this.message,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  created() {
    this.value = this.$route.query.user;

    getCust({
      keyword: "",
      current: 1,
      size: 20,
    }).then((res) => {
      this.columns = res.data.records.map((item) => item.custName);
    });
  },
};
</script>

<style scoped>
.userMessage {
  margin: 0.5rem 0;
}
.field {
  margin-top: 0.8rem;
}
.foot {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  text-align: center;
}
.btn {
  width: 80%;
  margin: 0 auto;
}
</style>
